<template>
  <el-row class="nav_bar">
    <el-col :span="24">
      <el-col class="navi_logo" :md="6" :sm="8" :xs="24">MOCKTOOL</el-col>
      <el-col :md="18" :sm="16" :xs="24">
        <el-menu class="navi_menu"
          :default-active="navi_index"
          mode="horizontal"
          background-color="#ffffff"
          text-color="#999999"
          router="true"
          active-text-color="#d7063b">
          <el-menu-item index="/"><i class="el-icon-document"/>首页</el-menu-item>
          <el-menu-item index="setup"><i class="el-icon-setting"/>设置</el-menu-item>
          <el-menu-item index="editor"><i class="el-icon-edit-outline"/>接口</el-menu-item>
          <el-menu-item index="history"><i class="el-icon-edit-outline"/>日志</el-menu-item>
        </el-menu>
      </el-col>
    </el-col>
  </el-row>
</template>

<style>
.navi_logo {
  background: #d7063b;
  color: #ffffff;
  height: 60px;
  font-size: 40px;
  text-align: center;
  padding-top: 5px;
}
</style>

<script>
export default {
  props: {
    navi_index: {
      type: String,
      required: true
    }
  }
}
</script>
